<!--开药方-->
<template>
<div>
  <el-card style="width: 100%;height: 120px;">
      <div>
        <span style="font-size: 22px">用户基本信息</span>
      </div>
      <div style="margin: 20px;display: inline-block;font-size: 18px"><span>姓名：{{patient.username}}</span></div>
      <div style="margin: 20px;display: inline-block;font-size: 18px"><span>就诊卡号：{{patient.patientNum}}</span></div>
      <div style="margin: 20px;display: inline-block;font-size: 18px"><span>性别：{{patient.gender}}</span></div>
      <div style="margin: 20px;display: inline-block;font-size: 18px"><span>年龄：{{patient.age}}</span></div>
      <div style="margin: 20px;display: inline-block;font-size: 18px"><span>过敏史：{{patient.allergy}}</span></div>
  </el-card>
  <el-card style="width: 100%;margin-top: 2px">
    <div>
      <span style="font-size: 22px">药方</span>
      <el-button type="primary" style="float: right;margin-top: 10px" @click="addDrug">添加用药</el-button>
    </div>
    <!-- 剂量弹窗 -->
    <el-dialog :title="dialogDosageTitle" v-model="dialogDosageVisible" style="width:1000px;padding:40px;" :before-close="closeDialog">
      <el-form label-width="80px" label-position="top">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="药名">
              <el-input v-model="drug.drugName" @change="choseDrug" disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格">
              <el-input v-model="drug.salePrice" disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="频率">
              <el-input placeholder="请输入内容" v-model="drug.frequency"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="一次计量">
              <el-input placeholder="请输入内容" v-model="drug.dosage" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="库存">
              <el-input disabled="true" v-model="drug.stock"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="药品类型">
              <el-input disabled="true" v-model="drug.drugCategory"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="注意事项">
              <el-input type="textarea" placeholder="请输入内容" v-model="drug.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="cancelDosage">取消</el-button>
        <el-button type="primary" @click="dosageSubmit">确定</el-button>
      </template>
    </el-dialog>
    <!-- 选药 -->
    <el-dialog :title="dialogDrugTitle" v-model="dialogDrugVisible" style="width:1000px;padding:40px;" :before-close="closeDialog"
    >
      <el-row :gutter="30">
        <el-col :span="22">
          <el-form-item label="药名">
            <el-input placeholder="请输入内容" v-model="drugName" @change="choseDrug"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-table :data="allDrug" style="width: 100%;margin-top: 20px">
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column prop="drugName" label="药名"></el-table-column>
        <el-table-column prop="stock" label="数量"></el-table-column>
        <el-table-column prop="drugCategory" label="药品类型"></el-table-column>
        <el-table-column prop="salePrice" label="价格"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="DrugSelected(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-table :data="presForm" style="width: 100%;margin-top: 20px">
      <el-table-column type="index" label="编号" ></el-table-column>
      <el-table-column prop="drugName" label="药名"></el-table-column>
      <el-table-column prop="salePrice" label="价格"></el-table-column>
      <el-table-column prop="stock" label="库存"></el-table-column>
      <el-table-column prop="drugCategory" label="药品类型"></el-table-column>
      <el-table-column prop="frequency" label="频率"></el-table-column>
      <el-table-column prop="dosage" label="一次剂量"></el-table-column>
      <el-table-column prop="remark" label="注意事项"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="editDosage(scope.row)" link>修改</el-button>
          <el-button type="danger" link @click="deleteDosage(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;margin-top: 20px">
      <el-button type="primary" style="float: right;margin:0" @click="saveInventory">保存</el-button>
    </div>
  </el-card>

</div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
//患者信息
const patient = ref({username:'lili',gender:'女',age:18,patientNum:'123456789',allergy:'无',patientId:'1'});
//处方表
const presForm = ref([]);
//药品信息
const drugName = ref('');
const drug = ref ({drugName:'',drugCategory:'',salePrice:'',dosage:'',remark:'',frequency:'',stock:''});
//用量弹窗
const dialogDosageTitle = ref("用量");
const dialogDosageVisible = ref(false);
//显示所有药品
const dialogDrugTitle = ref("药品信息");
const dialogDrugVisible = ref(false);
const allDrug = ref([]);
//存放添加药品
const drugForm = ref({});
const addDrug = ()=>{
  dialogDrugVisible.value = true;
  choseDrug();
}
const DrugSelected = (row)=>{
  dialogDrugVisible.value = false;
  dialogDosageVisible.value = true;
  drugName.value = row.drugName;
  drug.value = row;
}
const closeDialog =()=>{
  drugName.value ='';
  drugForm.value ={};
  dialogDrugVisible.value = false;
  dialogDosageVisible.value  = false;
}
const cancelDosage = ()=>{
  dialogDosageVisible.value = false;
  drugName.value = '';
  dialogDrugVisible.value = true;
}
const dosageSubmit = ()=>{
  drugForm.value = drug.value;
  drugForm.value.patientId = patient.value.patientId;
  presForm.value.push(drugForm.value);
  dialogDosageVisible.value = false;
  drugName.value = '';
  drugForm.value = {};
}
const deleteDosage = (row)=>{
  if (confirm("是否删除此药品")){
    presForm.value.splice(row.index,1);
  }

}
const choseDrug = ()=>{
  axios.get(BASE_URL +'inventory/query?drugName='+drugName.value).then((reponse)=>{
    if(reponse.data.code === 2000){
      allDrug.value = reponse.data.data;
    }
  })
}
const editDosage = (row)=>{
  dialogDosageVisible.value = true;
  drug.value = row;
}
const saveInventory = ()=>{
  let data = qs.stringify(presForm.value);
  axios.post(BASE_URL +'inventory/save',presForm.value).then((reponse)=>{
    if(reponse.data.code === 2000){
      alert("保存成功");
    }
  })
}
onMounted (()=>{
  choseDrug();
})

</script>

<style scoped>

</style>